<template>
  <j-modal
    :width="width"
    :visible="visible"
    :switchFullscreen="false"
    :fullscreen="fullscreen"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="visible = false"
    :footer="null"
    cancelText="关闭"
  >
    <template slot="title">收货详情 <span class="smart-title">入库单号：{{detailModel.inboundOrderNo}} </span> </template>
    <a-row>
      <a-col :span="6" class="row">
        <label>入库：</label><div>{{detailModel.inboundOrderNo}} </div>
      </a-col>
      <a-col :span="6" class="row"><label>物流：</label>
        <a-tooltip v-if="detailModel.logisticsNo" placement="bottom">
              <template slot="title">
                 <div v-for="(logisticsNo,index) in (detailModel.logisticsNo).split(',')" :key="index">{{logisticsNo}}</div>
              </template>
              <div class="text-overflow">{{detailModel.logisticsNo}}</div>
            </a-tooltip>
       </a-col>
      <a-col :span="6" class="row"><label>采购：</label>
        <span v-if="detailModel.purchaseOrderNo">
          <j-ellipsis :value="detailModel.purchaseOrderNo+ `${detailModel.purchasingSource ? `[${detailModel.purchasingSource}]` :''}`" width="60%"></j-ellipsis>
       </span>
      </a-col>
      <a-col :span="6" class="row">
        <label>调拨：</label><div>{{detailModel.transferOrderNo}} </div>
      </a-col>
      <a-col :span="6" class="row">
        <label>收货仓：</label>
        <span v-if="detailModel.warehouseType_dictText">
         <j-ellipsis :value="detailModel.warehouseType_dictText+ `${detailModel.warehouseName ? `-${detailModel.warehouseName}` :''}`" width="60%"></j-ellipsis>
      </span>
      </a-col>
      <a-col :span="6" class="row">
        <label>入库类型：</label><div>{{detailModel.inboundType_dictText}} </div>
      </a-col>
      <a-col :span="6" class="row">
        <label>入库状态：</label><div :style="{color:setFontColor(detailModel.inboundStatus)}">{{detailModel.inboundStatus_dictText}} </div>
      </a-col>
      <a-col :span="6" class="row">
        <label>采购备注：</label>
        <j-ellipsis :value="detailModel.purchaseRemark" width="60%" style="color:#ff0000"></j-ellipsis>
      </a-col>
      <a-col :span="6" class="row">
        <label>公司：</label>
        <j-ellipsis :value="detailModel.purchaseCompany" width="60%"></j-ellipsis>
      </a-col>
      <a-col :span="6" class="row">
        <label>组织：</label>
        <j-ellipsis :value="detailModel.purchaseOrganization" width="60%"></j-ellipsis>
      </a-col>
      <a-col :span="6" class="row">
        <label>采购员：</label>
        {{detailModel.purchaserName}}
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="6" class="row">
        <label>创建时间：</label>{{detailModel.createTime}}
     </a-col>
     <a-col :span="6" class="row">
        <label>到仓时间：</label>{{detailModel.arrivalTime}}
     </a-col>
     <a-col :span="6" class="row">
        <label>收货时间：</label>{{detailModel.receiveTime}}
     </a-col>
     <a-col :span="6" class="row">
        <label>上架时间：</label>{{detailModel.shelvingTime}}
     </a-col>
    </a-row>
    <a-row class="tip">
      <span>提示：到仓、收货、上架操作可能为多次，故对应时间分别为最近一次执行对应操作的系统时间。</span>
    </a-row>
    <a-tabs default-active-key="1" @change="tabChange">
      <a-tab-pane key="1" tab="入库单产品">
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="false"
        >
          <!-- 图片 -->
          <template slot="productMainImgSlot" slot-scope="text, record">
            <span v-if="!record.productMainImg" style="font-size: 12px; font-style: italic">无图片</span>
           <viewer :images="record.productMainImg.split(',')" v-else >
            <img :src="record.productMainImg" width="40px" height="auto" />
           </viewer>
          </template>
          <!-- 产品名称 -->
          <template slot="productNameSlot" slot-scope="text, record">
            <div style="width:250px; text-align: left;white-space: break-spaces;">{{text}}</div>
          </template>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="收货批次">
        <a-table
          rowKey="id"
          :loading="loading"
          :columns="columns2"
          :dataSource="dataSource2"
          :pagination="ipagination2"
          @change="handleTableChange2"
        >
          <!-- 图片 -->
          <template slot="productMainImgSlot" slot-scope="text, record">
            <span v-if="!record.productImage" style="font-size: 12px; font-style: italic">无图片</span>
           <viewer :images="record.productImage.split(',')" v-else >
            <img :src="record.productImage" width="40px" height="auto" />
           </viewer>
          </template>
          <!-- 产品名称 -->
          <template slot="productNameSlot" slot-scope="text, record">
            <div style="width:250px; text-align: left;white-space: break-spaces;">{{text}}</div>
          </template>
          <!-- 收货批次编号 -->
          <template slot="batchNumberSlot" slot-scope="text, record">
            <div>{{record.batchNumber}}</div>
            <div><a-tag v-if="record.receiveStatus && record.receiveStatus==='4'" color="#FF0202" style="margin-bottom:5px">{{record.receiveStatus_dictText}}</a-tag></div>
            <div><a-tag v-if="record.qcStatus" :color="record.qcStatus === '1'?'#F96500':'#1890FF'" style="margin:0 5px">{{record.qcStatus_dictText}}</a-tag>
                <a-tag v-if="record.qtyStatus" :color="record.qtyStatus === '1'?'#F96500':'#1890FF'">{{record.qtyStatus_dictText}}</a-tag>
              </div>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </j-modal>
</template>
<script>
import { postAction,getAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
  name: 'warehouseInboundDetailModal', //收货详情
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
        visible:false,
        width:1200,
        fullscreen:true,
        disableSubmit:false,
        detailModel:{},
        disableMixinCreated:true,  
        queryParam:{
            inboundOrderNoId:'',   //入库单ID
        },
        //入库单产品表头
        columns: [
        {
          title: '图片',
          align: 'center',
          dataIndex: 'productMainImg',
          scopedSlots: { customRender: 'productMainImgSlot' },
        },
        {
          width:250,
          title: '产品名称',
          align: 'center',
          dataIndex: 'productName',
          scopedSlots: { customRender: 'productNameSlot' },
        },
        {
          title: '比例',
          align: 'center',
          dataIndex: 'componentRatio',
        },
        {
          title: '仓库sku',
          align: 'center',
          dataIndex: 'warehouseSku',
        },
        {
          title: '状态',
          align: 'center',
          dataIndex: 'receiveStatus_dictText',
          customCell: (record, index) => {
            // 1.未收货,2.部分收货,3.收货完成 4.取消收货
            if (record.receiveStatus === '2') {
              return { style: { color: '#F96500' } }
            }
            if (record.receiveStatus === '3') {
              return { style: { color: '#1890FF' } }
            } else {
              return { style: { color: '#333333' } }
            }
          },
        },
        {
          title: '计划数',
          align: 'center',
          dataIndex: 'planQty',
        },
        {
          title: '已收数',
          align: 'center',
          dataIndex: 'receivedQty',
        },
        {
          title: '上架数',
          align: 'center',
          dataIndex: 'shelvedQty',
        },
        {
          title: '未收数',
          align: 'center',
          dataIndex: 'unreceivedQty',
        },
        {
          title: '残次数',
          align: 'center',
          dataIndex: 'defectiveQty',
        },
        {
          title: '通过数',
          align: 'center',
          dataIndex: 'passedQty',
        },
        {
          title: '实点数',
          align: 'center',
          dataIndex: 'actualQty',
        },  
        {
          title: '是否质检',
          align: 'center',
          dataIndex: 'qcRequirement_dictText',
        },
      ],
      dataSource2:[],  //收货批次
      //收货批次表头
      columns2: [
        {
          title: '图片',
          align: 'center',
          dataIndex: 'productImage',
          scopedSlots: { customRender: 'productMainImgSlot' },
        },
        {
          width:250,
          title: '产品名称',
          align: 'center',
          dataIndex: 'productName',
          scopedSlots: { customRender: 'productNameSlot' },
        },
        {
          title: '仓库sku',
          align: 'center',
          dataIndex: 'warehouseSku',
        },
        {
          title: '收货批次编号',
          align: 'center',
          dataIndex: 'batchNumber',
          scopedSlots: { customRender: 'batchNumberSlot' },
        },     
        {
          title: '计划数',
          align: 'center',
          dataIndex: 'plannedQty',
        },
        {
          title: '已收数',
          align: 'center',
          dataIndex: 'receivedQty',
        },
        {
          title: '上架数',
          align: 'center',
          dataIndex: 'shelvedQty',
        },
        {
          title: '未收数',
          align: 'center',
          dataIndex: 'unreceivedQty',
        },
        {
          title: '残次数',
          align: 'center',
          dataIndex: 'defectiveQty',
        },
        {
          title: '通过数',
          align: 'center',
          dataIndex: 'passedQty',
        },
        {
          title: '实点数',
          align: 'center',
          dataIndex: 'actualQty',
        },  
        {
          title: '是否质检',
          align: 'center',
          dataIndex: 'qcRequirement_dictText',
        },
        {
          title: '收货人',
          align: 'center',
          dataIndex: 'createBy',
        },
        {
          title: '收货时间',
          align: 'center',
          dataIndex: 'createTime',
        },
      ],
      /* 分页参数 */
      ipagination2:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30','50','100'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
        url:{
          queryById:'/wms/inboundOrder/queryById',    //通过id查询入库单信息
          list: '/wms/inboundProduct/queryByInboundOrderId',   //根据入库单ID查询入库产品信息
          receivingBatch:'/wms/receivingBatch/list',     //根据入库单ID查询收货批次
        }
    }
  },
  methods:{
    //打开收货详情弹窗
    showModal(inboundOrderNoId){
      this.queryParam.inboundOrderNoId = inboundOrderNoId
      this.visible = true
      this.getInboundOrderInfo()
      this.loadData(1)
    },
    //设置入库状态字体颜色
    setFontColor(status){
        switch (status) {
        case '2': //在途
          return '#01921C'
        case '3': //部分到仓
          return '#F96500'
        case '4': //已到仓
          return '#F96500'
        case '5': //部分收货
          return '#3F16E6'
        case '6': //收货完成
          return '#1890FF'
        case '7': //强制完成
          return '#0022FF'
        default:
          return '#333333'
      }
    },
    //切换标签页
    tabChange(value){
     if(value === '1'){
       this.loadData(1)
     }else{
       this.getReceivingBatchList()
     }
    },
    //收货批次翻页
    handleTableChange2(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination2 = pagination;
      this.getReceivingBatchList();
    },
    //获取收货批次列表
    getReceivingBatchList(){
      let params = Object.assign({inboundOrderId:this.queryParam.inboundOrderNoId}, this.isorter);
      params.pageNo = this.ipagination2.current;
      params.pageSize = this.ipagination2.pageSize;
      this.loading = true;  
      getAction(this.url.receivingBatch, params).then((res) => {
        if (res.success) {
          this.dataSource2 = res.result.records||res.result;
          this.ipagination2.total = res.result.total?res.result.total:0
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    //获取入库单信息
    getInboundOrderInfo(){
      getAction(this.url.queryById,{id:this.queryParam.inboundOrderNoId})
        .then(res=>{
          if(res.success){
           this.detailModel = Object.assign({},res.result) 
          }else{
            this.$message.warning(res.message)
          }
        })
    },
    
  },
}
</script>
<style lang="less" scoped>
.smart-title{
  margin-left: 20px;
  font-size: 14px;
}
.row{
    display: flex; 
    margin: 4px 0;
    color: #333333;
    label{
      color: #000000A6;
    }
    div{
      width: 70%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
}
.tip{
    text-align: center;
    margin: 20px 0 10px 0; 
span{
   color: #1890FF;
  padding: 3px 8px;
  background:rgba(24, 144, 255, 0.08);
  border: 1px solid #1890FF;
  border-radius: 5px;
  font-size: 13px;
}
  
}
/deep/.ant-tabs .ant-tabs-top-content{
    padding: 5px 0;
}
/deep/.ant-tag{
  font-size: 11px !important;
  padding: 0 7px !important;
  line-height: inherit;
}
</style>